<template>
  <a-modal
    v-model:visible="visible"
    title="选择文件清单"
    width="100%"
    :mask-closable="false"
    :keyboard="false"
    wrap-class-name="tn-model-full-scroll full-scroll-1200"
  >
    <a-layout class="select_template_layout">
      <a-layout-header class="select_template_search">
        <a-space>
          <DictFormItem
            v-model:value="queryData.projectType"
            app-code="CONFIG"
            flag="PROJECT_TYPE"
            placeholder="试验类型"
            style="width: 140px"
            :is-http="true"
            class="gray"
            @change="getTabList"
          />
          <DictFormItem
            v-model:value="queryData.listType"
            placeholder="清单类型"
            style="width: 120px"
            :data-list="ListTypeList"
            :is-http="false"
            class="gray"
            @change="getTabList"
          />
          <TnSearchInput
            v-model:value="queryData.listName"
            placeholder="按文件清单模板名称模糊搜索"
            @search="getTabList"
          />
        </a-space>
      </a-layout-header>
      <a-layout v-if="tabList.length">
        <a-layout-sider :width="240" class="select_template_sider">
          <a-card
            class="full-card"
            :body-style="{ padding: 0, overflow: 'auto' }"
            :bordered="false"
            title="文件清单名称"
          >
            <div class="show_list_ul">
              <div
                v-for="item in tabList"
                :key="item.fileListId"
                :class="['show_list_li', activeKey === item.fileListId ? 'active' : '']"
                @click="changeTem(item)"
              >
                <customShowTooltips :max-width="200" :content="item.listName"></customShowTooltips>
              </div>
            </div>
          </a-card>
        </a-layout-sider>
        <a-layout-content class="select_template_content">
          <TnNewTable :tn-table-props="tnTableProps" :columns="columns">
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex === 'fileName'">
                {{ record.fileName }} <br />
                <span class="fileDesc" :title="record.fileDesc">
                  {{ record.fileDesc }}
                </span>
              </template>
              <template v-if="column.dataIndex === 'requireFile'">
                {{ record.requireFile === 1 ? '是' : '否' }}
              </template>
              <template v-if="column.dataIndex === 'requireVersion'">
                {{ record.requireVersion === 1 ? '是' : '否' }}
              </template>
              <template v-if="column.dataIndex === 'fileFormat'">
                {{ record.fileFormat && record.fileFormat.length ? record.fileFormat.join('、') : '' }}
              </template>
              <template v-if="column.dataIndex === 'signFlag'">
                {{ record.signFlag ? '是' : '否' }}
              </template>
              <template v-if="column.dataIndex === 'templateFile'">
                <template v-for="item in record.templateFileList" :key="item.id">
                  <div class="text-ellipsis" :title="item.tempFileName">
                    <a href="#">{{ item.tempFileName }}</a>
                  </div>
                </template>
              </template>
            </template>
          </TnNewTable>
        </a-layout-content>
      </a-layout>
      <IcpEmpty v-if="!tabList.length"></IcpEmpty>
    </a-layout>
    <template #footer>
      <div>
        <a-button @click="onClose">取消</a-button>
        <a-button type="primary" ghost @click="refWhiteTem.show(taskId)">使用空白模板</a-button>
        <a-button type="primary" :loading="loading" :disabled="!activeKey" @click="onSubmit">选择</a-button>
      </div>
    </template>
  </a-modal>
  <WhiteTem
    ref="refWhiteTem"
    :mutil-add-fn="mutilAddFn"
    :hide-sign-setting="hideSignSetting"
    :tag="tag"
    @onClose="onClose"
  ></WhiteTem>
</template>
<script lang="ts" setup>
import { ref, Ref } from 'vue'
import { getFileList } from '@@/api/fileList'
import { columnsList } from '../index'
import { ListTypeList } from '@@/enums/fileListEnum'
import WhiteTem from './WhiteTem.vue'

const emits = defineEmits(['onReloadTable'])
const { taskId, submitFn, mutilAddFn, filterColumnsCode, hideSignSetting, tag } = defineProps<{
  taskId: string
  submitFn: any
  mutilAddFn: any
  filterColumnsCode?: string
  hideSignSetting?: boolean
  tag?: number | string
}>()

const visible = ref(false)
const loading = ref(false)
const tabLoading = ref(false)
const refWhiteTem = ref()
const activeKey = ref()
type queryType = {
  listName?: string
  listType?: string
  projectType?: string
}
const queryData: Ref<queryType> = ref({})
type tabListforMat = {
  fileListId: string
  listName: string
  fileListItemList: []
}
const tabList: Ref<tabListforMat[]> = ref([])
const columns = columnsList.filter((item: any) => {
  if (!filterColumnsCode) {
    return true
  } else if (filterColumnsCode.includes(item.dataIndex)) {
    return false
  }
  return true
})

const getTabList = async () => {
  tabLoading.value = true
  await getFileList(queryData.value)
    .then((res) => {
      tabLoading.value = false
      tabList.value = res
      tnTableProps.value.tableData = []
      if (tabList.value && tabList.value.length) {
        tabList.value.forEach((item) => {
          if (item.fileListItemList && item.fileListItemList.length) {
            item.fileListItemList.forEach((element: any) => {
              if (element.templateFile) {
                element.templateFileList = JSON.parse(element.templateFile)
              }
            })
          }
        })
        activeKey.value = tabList.value[0].fileListId
        tnTableProps.value.tableData = tabList.value[0].fileListItemList
      }
    })
    .catch(() => {
      tabLoading.value = false
    })
}

const onClose = () => {
  emits('onReloadTable')
  queryData.value = {}
  visible.value = false
}

const show = () => {
  visible.value = true
  getTabList()
}

//保存
const onSubmit = () => {
  loading.value = true
  submitFn({ fileListId: activeKey.value, taskId, tag })
    .then(() => {
      loading.value = false
      onClose()
    })
    .catch(() => {
      loading.value = false
    })
}
const changeTem = (item) => {
  activeKey.value = item.fileListId
  tnTableProps.value.tableData = item.fileListItemList
}
const tnTableProps = ref({
  name: 'CommonTaskKanbanfileListSelectFileTemTable',
  tableData: [],
  showNo: false,
  needPagination: false,
  needToolbar: false
})
// 暴露给父组件的方法
defineExpose({
  show
})
</script>

<style lang="less" scoped>
.file-list-add-box {
  .fileDesc {
    color: #999;
    font-size: 12px;
  }
  .tab_title {
    text-align: left;
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>
